<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScript访问DOM数案例</title>
	</head>
	<body>
		<h3>JavaScript访问DOM数案例</h3>
		<h5>JavaScript使用api的4种方式：访问h3标签，a标签，获取它们内容</h5>
		<h5>tagName,className,name,</h5>
		
		
		<a href="http://www.taobao.com" target="_blank">淘宝</a>
		<a class="jd" href="http://www.jd.com" target="_blank">京东</a>
		<a name="pdd" href="http://www.pinduoduo.com" target="_blank">拼多多</a>
        <a id="cgb" href="http://act.codeboy.com" target="_blank">java培优</a>
	
	<!--页面上使用JavaScript，通过script标签来实现
	,type="text/javascript"新标准可以省略
	src  引入外部js jQuery.js
	js中可以使用双引号或者单引号来把字符串括起来-->
	
	
	<script>
		window.alert('使用js获取页面元素内容');//BOM中提供弹出框api
	    
		<!--获取页面a标签,按tagName返回是一个数组
		//第一个元素:arr[0],下标从0开始-->
		//谷歌浏览器提供console方式,必须F12查看
		
		
		
		//第一种方式：tagname方式
		console.log( document.getElementsByTagName("a")[0].innerText) ;//得到页面上a标签的内容
	    console.log(document.getElementsByTagName('a')[0].href);//得到页面上a标签的属性
	
	
	   //第二种方式：className方式
	   console.log(document.getElementsByClassName('jd')[0].innerText);
	   console.log(document.getElementsByClassName('jd')[0].href);
	
    
	   //第三种方式：name方式	
	   console.log(document.getElementsByName('pdd')[0].innerText);
	   console.log(document.getElementsByName('pdd')[0].href);
	   
	   //第四种方式: id方式
	   console.log(document.getElementById('cgb').innerText);
	   console.log(document.getElementById('cgb').href);
	
	
	//能否修改页面值，html做不了写死的，css也不了，js可以
	//淘宝改成天猫
	   // document.getElementsByTagName('a')[0].innerText ="天猫";
	    //document.getElementsByTagName('a')[0].href = "http://www.baidu.com";
	//定义变量a，后面可以操作a
	var a=document.getElementsByTagName('a')[0];
	    a.innerText="百度";
	    a.href="http://www.baidu.com";
	
	</script>
	
	
	</body>
</html>
